import React, { PureComponent, Fragment } from 'react';
import { connect } from 'dva';
import styles from './index.less';
import Search from 'antd/es/input/Search';
import ArticleSummary from '../../Component/ArticleSummary';
import { Pagination } from 'antd';
import { InputNumber } from 'antd';

@connect(({ search, loading }) => ({
  search,
  loading: loading.models.search,
}))
class IndexPage extends PureComponent {
  state = {
    hasSearch: false,
    count: 10,
    page: 1,
    data: [],
    value: '',
    min: 0,
    max: 100000,
  };

  componentDidMount() {}

  handleSearch = value => {
    if (value.length === 0) {
      return;
    }
    this.state.value = value;
    const { dispatch } = this.props;
    dispatch({
      type: 'search/search',
      payload: {
        count: 10,
        page: 1,
        query: value,
        min: this.state.min,
        max: this.state.max,
      },
    });
    this.setState({
      hasSearch: true,
      count: 10,
      page: 1,
    });
  };

  handleChangePage(page, pageSize) {
    const { dispatch } = this.props;
    this.setState({
      count: pageSize,
      page: page,
    });
    dispatch({
      type: 'search/search',
      payload: {
        count: pageSize,
        page: page,
        query: this.state.value,
        min: this.state.min,
        max: this.state.max,
      },
    });
  }

  minChange(value) {
    if (value < this.state.max) {
      this.setState({
        min: value,
      });
    }
  }

  maxChange(value) {
    if (value > this.state.min) {
      this.setState({
        max: value,
      });
    }
  }

  render() {
    const {
      loading,
      search: { data },
    } = this.props;
    const { hasSearch, min, max } = this.state;
    const total_page = Math.ceil(data.total / 10);
    return (
      <div
        className={
          hasSearch === false ? styles.container : styles.container_left
        }
      >
        <div
          className={hasSearch === false ? styles.content : styles.content_left}
        >
          <div className={hasSearch === false ? styles.logo : styles.logo_left}>
            <span>快搜</span>
          </div>
          <Search
            className={hasSearch === false ? styles.search : styles.search_left}
            placeholder="请输入要搜索的内容，最长搜索100个字符"
            enterButton="搜索"
            size="large"
            maxLength={100}
            onSearch={value => this.handleSearch(value)}
            loading={loading}
          />
        </div>
        {hasSearch === true ? (
          <div className={styles.result}>
            <div className={styles.range}>
              <span>字数：</span>
              <InputNumber
                size="small"
                defaultValue={0}
                min={0}
                step={1000}
                value={min}
                onChange={value => this.minChange(value)}
              />
              <span> - </span>
              <InputNumber
                size="small"
                max={100000}
                value={max}
                defaultValue={100000}
                step={1000}
                onChange={value => this.maxChange(value)}
              />
            </div>
            {data.items.map(item => {
              return (
                <ArticleSummary
                  title={item.title}
                  summary={item.summary}
                  id={item.id}
                  similar_rate={item.similar_rate}
                  create_time={item.create_time}
                  char_sum={item.char_sum}
                />
              );
            })}
            <div className={styles.page}>
              <Pagination
                total={total_page}
                current={this.state.page}
                hideOnSinglePage={true}
                pageSize={10}
                showQuickJumper={false}
                pageSizeOptions={[10]}
                onChange={(page, pageSize) =>
                  this.handleChangePage(page, pageSize)
                }
                showSizeChanger={false}
              />
            </div>
          </div>
        ) : null}
      </div>
    );
  }
}

export default IndexPage;
